<template>
  <div class="deep-data">

    <div class="flex justify-between font-10 orderbook buy" v-for="(item, index) in redData" :key="item + index"
      @click="onPrice(item.price)" :style="{
        'background': `linear-gradient(to right,${THEME == 'dark' ? '#131a2e' : '#ffffff'} 0%` +
          (item.amount / greenData[greenData.length - 1].amount) * 100 + '%,rgba(34, 53, 57, 1) ' +
          (item.amount / greenData[greenData.length - 1].amount) * 100 + '%,rgba(34, 53, 57, 1) 100%)'
      }">
      <div class="text">{{ $t('卖出') }}{{ 5 - index }}</div>
      <div>&nbsp;&nbsp;</div>
      <div class="justify-between flex flex-1">
        <div class="text-red">{{ formatMoney(item.price) }}</div>
        <div class="text-right textColor">{{ formatMoney(item.amount) }}</div>
      </div>
    </div>
    <div class="text-red pt-2 pb-2 font-14 font-700 text-center middle-box">
      <div class="rect-box">
        <div class="red"></div>
        <div class="green"></div>
      </div>
    </div>
    <div class="flex font-10 orderbook sell" v-for="(item, index) in greenData" :key="index" @click="onPrice(item.price)"
      :style="{
        'background': `linear-gradient(to right,${THEME == 'dark' ? '#131a2e' : '#ffffff'} 0%` +
          (item.amount / greenData[greenData.length - 1].amount) * 100 + '%,rgba(69, 46, 66, 1) ' +
          (item.amount / greenData[greenData.length - 1].amount) * 100 + '%,rgba(69, 46, 66, 1) 100%)'
      }">
      <div class="text">{{ $t('买入') }}{{ index + 1 }}</div>
      <div>&nbsp;&nbsp;</div>
      <div class="justify-between flex flex-1">
        <div class="text-green">{{ formatMoney(item.price) }}</div>
        <div class="text-right textColor">{{ formatMoney(item.amount) }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { WS_URL } from '@/config'
import { fixDate, formatMoney } from "@/utils";
const DEEP_LENGTH = 5
const THEME = 'dark'

export default {
  name: 'TradeDeepData',
  props: {
    symbol: {
      type: String,
    },
    price: {
      type: [Number, String],
      default: '0.00'
    },
    isAddBlank: {
      type: Boolean,
      default: false
    }
  },
  data() {
    const init = []
    for (let i = 0; i < DEEP_LENGTH; i++) {
      init.push({ amount: '', price: '' })
    }
    return {
      THEME,
      fixDate,
      formatMoney,
      greenData: init,
      redData: init,
      socket: null,
    }
  },
  created() {
    console.log('*******', this.symbol)
    this.startDeepSocket()
  },
  mounted() {
    // this.startDeepSocket()
  },
  watch: {
    symbol(val) {
      // this.startDeepSocket()
    }
  },
  methods: {
    startDeepSocket() { // 开启socket链接
      this.closeSocket()
      this.socket = new WebSocket(`${WS_URL}/3/${this.symbol}`)
      console.log('------------', this.socket)
      this.socket.onmessage = (evt) => {
        console.log('=======', evt.data)
        const { data } = evt
        const { code, data: _data } = JSON.parse(data)
        if (code / 1 === 0) {
          this.handleDeep(_data)
          const newPrice = (_data?.bids && _data?.bids[0].price) || '0'
          this.$emit('newPrice', newPrice)
        }
      }
    },
    handleDeep(data = {}) { // 格式化数据
      this.deepData = data
      const { asks = [], bids = [] } = data || {}
      this.redData = asks.sort((a, b) => b.price - a.price).slice(0, DEEP_LENGTH)
      // console.log('>>>>>', this.redData)
      this.greenData = bids.sort((a, b) => b.price - a.price).slice(0, DEEP_LENGTH)
    },
    onPrice(price) {
      this.$emit('price', price)
    },
    closeSocket() {
      this.socket && this.socket.close()
      this.socket = null
    },
  },
  activated() {
    this.startDeepSocket()
  },
  deactivated() {
    this.closeSocket()
  },
  beforeUnmount() { //
    this.socket && this.socket.close()
    this.socket = null
  }

}    
</script>
<style lang="scss">
.orderbook {
  line-height: 20px;
  margin-bottom: 6px;
}

.middle-box {
  .rect-box {
    display: flex;
    width: 100%;
    height: 7px;
    background: $red;
  }

  .red {
    width: 50%;
  }

  .green {
    width: 50%;
    background: url('../../assets/image/quotes/g-rectangle.png') no-repeat;
  }
}

.sell {
  color: $red;
}

.buy {
  color: $green;
}

.text {
  color: $text_color;
}

.font-10 {
  font-size: 10px;
}
</style>